<template>
   <el-aside width="220px" class="image-aside" v-loading="loading">
          <div class="top">

            <AsideList :active="activeId == item.id" v-for="(item,index) in list" 
            :key="index" 
            @edit="handleEdit(item)" 
            @delete="handleDelete(item.id)"
            @click="handleChangeActiveId(item.id)">
              {{item.name}}
            </AsideList>


          </div>
          <div class="bottom">
            <el-pagination background layout="prev, next" :total="total" 
            :current-page="currentPage" :page-size="limit" 
            @current-change="getData"/>
          </div>
        </el-aside>

        <!-- 通过 formDrawerRef 可以直接访问 FormDrawer 组件的属性和方法。 -->
         <!-- v-model实现页面和数据的双绑定 -->
        <FormDrawer :title="drawTitle" ref="formDrawerRef" @submit="handleSubmit">
          <el-form :model="form" 
          ref="formRef" 
          :rules="rules" label-width="80px" :inline="false">
            <el-form-item label="分类名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="order">
              <el-input-number v-model="form.order" :min="0" :max="1000" />
            </el-form-item>
          </el-form>
          
        </FormDrawer>


</template>
<script setup>
import FormDrawer from "./FormDrawer.vue"
import {ref} from "vue"
import {getImageClassList,
  CreateImageClassList,
  upDateImageClassList,
  deleteImageClassList
} from "@/api/image_class"
import AsideList from "./AsideList.vue"
import { reactive } from "vue"
import {toast} from "@/composables/util"
import { computed } from "vue"


//加载动画
const loading = ref(false)
const list = ref([])


//分页
const currentPage = ref(1)//当前页码
const total = ref(0)//分类总数--多少条
const limit = ref(10) //每一页显示多少条

   const editId = ref(0)
   const drawTitle = computed(()=> editId.value ? "修改" : "新增")



//获取数据
function getData(p = null){
  if(typeof p == "number"){
    //p默认值为null 为数字类型说明有传页码过来
    currentPage.value = p //拿到最新的页码
  }

  loading.value = true
  getImageClassList(currentPage.value) //切换数据
  .then(res=>{
      total.value = res.totalCount // 总共的条数
      list.value = res.list //每一条的数据
      // 一开始第一个列表数据就被设置成activeId--被激活
      let item = list.value[0]
      if(item){
        handleChangeActiveId(item.id)
      }
    })
    .finally(()=>{
      loading.value = false
  })
}
getData()


  //  规定了表单里面的一些东西
   const form = reactive({
    name:"",//分类名称
    order:50 //排序值--默认
   })

  //  验证规则
   const rules = {
    name:[{ //对应表单中prop="name"--关联验证规则
        required: true,
        message: "图库分类名称不能为空",
        trigger: "blur", //name为空则显示错误提示
      }]
   }

   //表单的ref
   const formRef = ref(null)

    const handleSubmit = ()=>{ //validate触发表单验证
        formRef.value.validate((valid)=>{ //valid是布尔值
            if(!valid) return  //如果是假的，直接终止掉

            //请求接口之前处于一个loading的状态
            formDrawerRef.value.showloading()
            const fun = editId.value ? upDateImageClassList(editId.value,form) : 
             CreateImageClassList(form)
            //传递的是name和order
            fun.then(res=>{
              toast(drawTitle.value + "成功")
              getData(editId.value ? currentPage.value : 1 )//重新获取第一页的数据
              formDrawerRef.value.close()
        }).finally(()=>{
          formDrawerRef.value.hideloading()
        })
   })
  }


//新增图片分类--可以通过formDrawerRef拿到子组件的属性和方法
   const formDrawerRef = ref(null)
   const handleCreate = ()=>
   {
    editId.value = 0  //false
    // 先清空,回到默认值
    form.name = ""
    form.order = 50
    formDrawerRef.value.open()
   }
   


  //触发编辑--修改
  const handleEdit = (row)=>{
    editId.value = row.id //true
    //先初始化
    form.name = row.name
    form.order = form.order
    formDrawerRef.value.open()
  }

  //删除方法
  const handleDelete = (id)=>{
    loading.value = true
    deleteImageClassList(id).then(res=>{
        toast("删除成功")
        getData()
    }).finally(()=>{
      loading.value = false
    })
  }

  //选中图库分类id
  const activeId = ref(0)
  const emit = defineEmits(["change"])
  //切换分类
  function handleChangeActiveId(id){
    activeId.value = id
    emit("change",id)
  }
  

   defineExpose({
    handleCreate
   })



</script>

<style scoped>
.image-aside{
  border-right:1px solid #eeeeee;
  /* 滚动条 */
  position: relative;
}

.image-aside .top{
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:50px;
  overflow-y:auto;
}
.image-aside .bottom{
  position: absolute;
  bottom: 0;
  height: 50px;
  left: 0;
  right: 0;
  @apply flex items-center justify-center;
}

</style>